<template>
    <view>
        <view class="header-bar1" :style="{paddingTop:statusBar+'px'}">
            <uni-icons type="left" v-if="leftIcon" @click="goBack" size="28" color="#fff"></uni-icons>
            <uni-icons type="" v-if="!leftIcon" @click="goBack" size="28" color="#fff"></uni-icons>
            <text class="text">{{title}}</text>
            <uni-icons type="" size="28" color="#fff"></uni-icons>
        </view>
        <view class="header-bar" :style="{paddingTop:statusBar+'px'}">
            <uni-icons type="left" v-if="leftIcon" @click="goBack" size="28" color="#fff"></uni-icons>
            <uni-icons type="" v-if="!leftIcon" @click="goBack" size="28" color="#fff"></uni-icons>
            <text class="text">{{title}}</text>
            <uni-icons type="" size="28" color="#fff"></uni-icons>
        </view>
    </view>
</template>
<script>
    export default {
        props: {
            leftIcon: {
                type: Boolean,
                default: true
            },
            title: {
                type: String,
                default: ''
            },
        },
        data(){
            return {
                statusBar:10,
            }
        },
        created() {
            uni.getSystemInfo({
                success: (e) => {
                    this.statusBar = e.statusBarHeight;
                }
            })
        },
        methods: {
            goBack() {
                uni.navigateBack({
                    delta: 1
                })
            }
        }
    }
</script>
<style lang="scss" >
    .header-bar,.header-bar1{
        background: #3c96f3;
        color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .text{
            font-size: 16px;
            text-align: center;
            padding: 10px 0;
        }
    }
    .header-bar1{
        position: fixed;
        width: 100%;
        top:0;
        z-index: 1;
    }
</style>
